<template>
<div class="login">
  <div class="name">
    <h2  align="center">用户登录</h2>

    <div class="input-container1">
        <i class="icon"></i>
        <input type="text" v-model="username" placeholder="请输入用户名" class="input-text">
      </div>

      <div class="input-container2">
        <i class="icon"></i>
        <input type="text" v-model="password" placeholder="请输入密码" class="input-text">
      </div>

    <div class="input">
      <button class="login-button" @click="submit">登录</button>
    </div>
    <div class="input">
      <div class="checkbox-container">
        <input type="checkbox" id="rememberMe" name="remember">
        <label for="rememberMe" style="color: white">记住我</label>
        <a href="forgot-password" class="forget-password">忘记密码？</a>
    </div>
  </div>
</div>
</div>
</template>

<script>
import { login } from '@/api/user.js'; // 确保路径正确
import { useInfoStore } from '@/store/modules/user.js';
import Account from "@/views/Account/Account.vue";
export default {
  name: 'LoginForm',
  data() {
    return {
      username: '', 
      password:'',
    };
  },
  methods: {
    async submit() {
      const data = {
        username: this.username,
        password: this.password,
      };
      try {
        const response = await login(data);
        console.log('登录成功:', response.status_code);
        // 获取 Pinia store 实例
        const infoStore = useInfoStore();

        // 将用户名放入 userinfo 中
        infoStore.setUserInfo({ username: this.username });
        
        this.$router.push('/Account');
      } catch (error) {
        console.error('登录失败:', error.message);
        // 在这里处理登录失败后的逻辑，例如显示错误信息
      }
    }
  }
};
</script>
<style scoped>
.login{
  background-image: url(../../assets/user/userbackground.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.name{
  height: 600px;
}
.name h2{
  font-family:inter;
  font-size: 30px;
  color: #ffffff;
  margin-top:197px;
}
.input-container1 {
  display: flex;
  align-items: center;
  border: 0.3vh solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
  width: 21vw;  /* 根据需要调整宽度 */
  /* margin: 0 auto; */
  margin-left:38vw;
  margin-top:2vh;
  background-color: rgba(210, 210, 210, 0.6);
}

.input-container1 .icon {
  display: inline-block;
  width: 2vw;  /* 根据图像的大小调整 */
  height: 3.5vh;  /* 根据图像的大小调整 */
  background-image: url('../../assets/user/user.png');
  background-position: center;
  background-size: cover;  /* 确保图片完全覆盖整个区域 */
  background-repeat: no-repeat;
  margin-right: 10px;
}

.input-container1 input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 20px;
  background: none;
  height: 40px; /* 输入框的高度 */
}
.input-container2 {
  display: flex;
  align-items: center;
  border: 0.3vh solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
  width: 21vw;  /* 根据需要调整宽度 */
  /* margin: 0 auto; */
  margin-left:38vw;
  margin-top:2vh;
  background-color: rgba(210, 210, 210, 0.6);
}
.input-container2 .icon {
  display: inline-block;
  width: 2vw;  /* 根据图像的大小调整 */
  height: 3.5vh;  /* 根据图像的大小调整 */
  background-image: url('../../assets/user/password.png');
  background-position: center;
  background-size: cover;  /* 确保图片完全覆盖整个区域 */
  background-repeat: no-repeat;
  margin-right: 10px;
}

.input-container2 input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 20px;
  background: none;
  height: 40px; /* 输入框的高度 */
}
.input{
  height: 53px;
  width: 21vw;
  margin-left: 38vw; 
  margin-top: 2vh;
}
.login-button {
  height: 53px;
  width: 427px;
  /* 其他样式，如背景色、边框、字体大小等 */
  background-color: rgb(210, 210, 210, 0.95);
  border: none; /* 去除边框 */
  color: white; /* 白色文字 */
  font-size: 20px; /* 字体大小 */
  cursor: pointer; /* 鼠标悬停时显示为手形图标，表示可点击 */
  border-radius: 20px; /* 边框圆角 */
  padding: 0 20px; /* 内边距，可以根据需要调整以控制文字与按钮边缘的距离 */
  display: block;
  margin: 0 auto;
  text-align: center; /* 文字居中显示 */
  line-height: 53px; /* 行高与按钮高度相同，确保文字垂直居中 */
}
.checkbox-container {
  display: flex; 
  margin-left:1vw;
  width:22vw;
}
.forget-password {
  margin-left: 12vw; /* 或者你需要的任何宽度 */
  color: white; /* 如果需要的话，也可以设置链接的颜色 */
}
#rememberMe{
  width: 1vw;
  height: 1vw;
}
</style>
